<template>
  <s-layout :bgStyle="{ color: '#fff' }" tabbar="/pages/index/life_store_detail" title="店铺详情">
    <!-- 核心信息区 -->
    <view class="info-container">
      <!-- 店招模块 -->
      <view class="shop-header">
        <view class="title-group">
          <text class="shop-name">{{ state.storeInfo.name  }}</text>
        </view>
      </view>
 
      <!-- 数据看板 -->
      <view class="star-rating">
        <image 
          v-for="n in 5"
          :key="n"
          class="star-icon"
          src="/static/images/star.png"   
          mode="widthFix"
        />
      </view>
      <view class="discount-tags" v-if="state.storeInfo.points?.length  > 0">
        <text 
          v-for="(points, idx) in state.storeInfo.points"   
          :key="idx"
          class="discount-tag"
        >
          {{ points.pointsValue  }}积分 
        </text>
      </view>
      <view class="image-list" v-if="state.storeInfo.storeImages  || state.storeInfo.detailImage">   
        <view class="image-scroll">
          <view class="image-item" v-if="state.storeInfo.storeImages">   
            <image 
              class="detail-image"
              :src="state.storeInfo.storeImages"   
              mode="aspectFill"
            />
          </view>
          <view class="image-item" v-if="state.storeInfo.detailImage">   
            <image 
              class="detail-image"
              :src="state.storeInfo.detailImage"   
              mode="aspectFill"
            />
          </view>
        </view>
      </view>
 
      <!-- 平铺信息区块 -->
      <view class="flat-info-group">
        <view class="info-row operation-status">
          <image class="icon" src="/static/lifecircle/clock.png"/>  
          <view class="status-wrapper">
            <view class="time-display">
              <text class="status-badge">{{ state.storeInfo.status  === 0 ? '🟢 营业中' : '🔴 已打烊' }} </text>
              <text class="business-hours">( {{ state.storeInfo.openingTime  }}-{{ state.storeInfo.closingTime  }} )</text>
            </view>
          </view>
        </view>
 
        <view class="info-row address-info">
          <image class="icon" src="/static/images/pos_red.png"/>  
          <text class="content">{{ state.storeInfo.detailAddress  }}</text>
        </view>
 
        <view class="info-row contact-info">
          <image class="icon" src="/static/lifecircle/call-arrow.png"/>  
          <text class="content">{{ state.storeInfo.phone  }}</text>
<!--          <button class="call-btn" hover-class="none" @tap="makeCall">
            <text>一键拨打</text>
          </button> -->
        </view>
      </view>
    </view>
 
    <!-- 底部操作按钮 -->
<!--    <view class="dual-action-group">
      <button class="dual-btn checkin" @tap="handleCheckIn">
        <image class="btn-icon" src="/static/images/pos_green.png"/>    
        打卡 
      </button>
      <button class="dual-btn review" @tap="openReviewPopup">
        <image class="btn-icon" src="/static/lifecircle/write.png"/>    
        评论 
      </button>
    </view> -->
 
    <!-- 评论弹窗 -->
    <view v-if="state.showReviewPopup"  class="review-popup-mask">
      <view class="review-popup">
		  <!-- 新增五星评分组件 -->
		  <view class="stars-container">
			<view 
			  v-for="n in 5" 
			  :key="n"
			  class="star"
			  @click="state.rating  = n"
			>
			  <text :class="['star-icon', { filled: state.rating  >= n }]">★</text>
			</view>
		  </view>
        <textarea 
          class="review-input"
          placeholder="请输入您的评价"
          maxlength="200"
          auto-height 
        />
        
        <view class="button-group">
          <button class="cancel-btn" @tap="closeReviewPopup">取消</button>
          <button class="confirm-btn" @tap="submitReview">确定</button>
        </view>
      </view>
    </view>
  </s-layout>
</template>
 
<script>
import { reactive } from 'vue'
import sheep from '@/sheep'
import { onLoad } from '@dcloudio/uni-app';
import LifeCircleApi from '@/sheep/api/product/lifecircle'
 
export default {
  setup() {
    const state = reactive({
      storeInfo: null,
      id: null,
      showReviewPopup: false,
	  rating: 0,       
      reviewContent: ''
    })
 
    const getSDetail = async () => {
      try {
        const { code, data } = await LifeCircleApi.getStoreDetail(state.id)   
        if (code === 0) {
          state.storeInfo  = data 
        }
      } catch (e) {
        sheep.$helper.toast(' 数据加载失败')
      }
    }
 
    const makeCall = () => {
      uni.makePhoneCall({  
        phoneNumber: state.storeInfo.phone   
      })
    }
 
    const handleCheckIn = () => {
      uni.showToast({  
        title: '打卡成功',
        icon: 'success',
        duration: 2000 
      })
    }
 
    const openReviewPopup = () => {
      state.showReviewPopup  = true 
    }
 
    const closeReviewPopup = () => {
      state.showReviewPopup  = false 
      state.reviewContent  = ''
    }
 
  const submitReview = async () => {
    if (state.rating  === 0) {
      uni.showToast({  title: '请先进行星级评分', icon: 'none' })
      return 
    }
    
    try {
      // 实际提交逻辑（需自行对接接口）
      console.log(' 提交内容:', {
        rating: state.rating, 
        content: state.reviewContent  
      })
      uni.showToast({  title: '评价提交成功', icon: 'success' })
      closeReviewPopup()
    } catch (error) {
      uni.showToast({  title: '提交失败，请重试', icon: 'none' })
    }
  }
 
    onLoad((options) => {
      state.id  = options.id  || this.$route?.params?.id 
      if (!state.id)   {
        sheep.$helper.toast(' 参数错误')
        uni.navigateBack()   
        return 
      }
      getSDetail()
    })
 
    return { 
      state, 
      makeCall, 
      handleCheckIn,
      openReviewPopup,
      closeReviewPopup,
      submitReview 
    }
  }
}
</script>
 
<style lang="scss">
/* 核心信息容器 */
.info-container {
  padding: 32rpx 24rpx;
  background: linear-gradient(180deg, #fff 60%, #f7f7f7 100%);
  
  .shop-header {
    margin-bottom: 48rpx;
    .title-group {
      display: flex;
      align-items: center;
      .shop-name {
        font-size: 44rpx;
        font-weight: 700;
        color: #333;
        margin-right: 24rpx;
      }
    }
  }
}
 
/* 星标评分模块 */
.star-rating {
  display: flex;
  margin: 24rpx 0;
  .star-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 8rpx;
  }
}
 
/* 优惠标签 */
.discount-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  .discount-tag {
    padding: 8rpx 24rpx;
    background: rgba($color: #FF5C00, $alpha: 0.1);
    border-radius: 40rpx;
    font-size: 24rpx;
    color: #FF5C00;
  }
}
 
/* 图片滚动区 */
.image-list {
  margin: 32rpx 0;
  
  .image-scroll {
    display: flex;
    justify-content: space-between; // 关键点：两端对齐 
    padding: 0 24rpx;
    
    .image-item {
      width: calc(50% - 12rpx); // 精确计算间距 
      height: 360rpx;
      border-radius: 16rpx;
      overflow: hidden;
      
      .detail-image {
        width: 100%;
        height: 100%;
        object-fit: cover; // 关键点：图片填充模式 
      }
    }
  }
}
 
/* 平铺信息组 */
.flat-info-group {
  background: #fff;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.03);
  
  .info-row {
    display: flex;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 2rpx solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 24rpx;
    }
    
    .content {
      flex: 1;
      font-size: 28rpx;
      color: #666;
    }
    
    .call-btn {
      padding: 12rpx 32rpx;
      background: #4CD964;
      border-radius: 40rpx;
      font-size: 26rpx;
      color: #fff;
      line-height: 1;
    }
  }
}
 
/* 底部双按钮 */
.dual-action-group {
  margin-top: 30rpx;
  padding: 0 24rpx;
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
 
  .dual-btn {
    flex: 1;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    border-radius: 88rpx;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
    .btn-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 12rpx;
      transition: transform 0.2s ease;
    }
 
    &:active {
      transform: scale(0.96);
      opacity: 0.9;
    }
  }
 
  .checkin {
    background: linear-gradient(135deg, #09BE67 0%, #2ECC71 100%);
    color: #fff;
    box-shadow: 0 6rpx 20rpx rgba(9, 190, 103, 0.3);
  }
 
  .review {
    background: #fff;
    color: #333;
    border: 2rpx solid #e0e0e0;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  }
}
 
/* 评论弹窗（已更新星星样式）*/
.review-popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  
  .review-popup {
    width: 80%;
    background: #fff;
    border-radius: 24rpx;
    padding: 48rpx;
    
    /* 五星评分组件（修改点） */
    .stars-container {
      display: flex;
      justify-content: center;
      margin-bottom: 48rpx;
      
      .star {
        margin-right: 24rpx;
        
        &:active {
          transform: scale(1.2);
        }
        
        .star-icon {
          font-family: 'Material Icons'; // 使用矢量图标 
          font-size: 64rpx !important;
          color: #DDD !important;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          
          &.filled {
            color: #FF4500 !important;
            transform: scale(1.15);
            text-shadow: 0 8rpx 16rpx rgba(255,69,0,0.2);
          }
        }
      }
    }
 
    .review-input {
      width: 100%;
      min-height: 200rpx;
      padding: 24rpx;
      background: #f8f9fa;
      border-radius: 16rpx;
      font-size: 28rpx;
      margin-bottom: 48rpx;
    }
    
    .button-group {
      display: flex;
      justify-content: space-between;
      button {
        flex: 0.48;
        height: 80rpx;
        border-radius: 80rpx;
        font-size: 30rpx;
        
        &.cancel-btn {
          background: #f8f9fa;
          color: #666;
        }
        
        &.confirm-btn {
          background: #007AFF;
          color: #fff;
        }
      }
    }
  }
}
</style>